import "./css.scss";
export default defineComponent({
	name: "ResourceDetails",
	setup() {
		const dashboard_row_dom = ref();
		const iconDom = ref<HTMLDivElement>();
		onMounted(() => {
			dashboard_row_dom.value.addEventListener("mouseover", function () {
				iconDom.value.style.opacity = "1";
				iconDom.value.style.visibility = "visible";
			});
			dashboard_row_dom.value.addEventListener("mouseout", function () {
				iconDom.value.style.opacity = "0";
				iconDom.value.style.visibility = "hidden";
			});
		});
		return () => (
			<div
				class="react-grid-item react-resizable-hide react-resizable"
				data-panelid="189"
				style="top: 304px; left: 0px; width: 1828px; height: 30px; position: absolute;"
			>
				<div class="dashboard-row" ref={dashboard_row_dom}>
					<a class="dashboard-row__title pointer">
						<div class="css-1vzus6i-Icon">
							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" class="css-sr6nr">
								<path d="M17,9.17a1,1,0,0,0-1.41,0L12,12.71,8.46,9.17a1,1,0,0,0-1.41,0,1,1,0,0,0,0,1.42l4.24,4.24a1,1,0,0,0,1.42,0L17,10.59A1,1,0,0,0,17,9.17Z"></path>
							</svg>
						</div>
						资源明细：【None】<span class="dashboard-row__panel_count">(0 panels)</span>
					</a>
					<div class="dashboard-row__actions" ref={iconDom}>
						<a class="pointer">
							<div class="css-1vzus6i-Icon">
								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" class="css-sr6nr">
									<path d="M21.32,9.55l-1.89-.63.89-1.78A1,1,0,0,0,20.13,6L18,3.87a1,1,0,0,0-1.15-.19l-1.78.89-.63-1.89A1,1,0,0,0,13.5,2h-3a1,1,0,0,0-.95.68L8.92,4.57,7.14,3.68A1,1,0,0,0,6,3.87L3.87,6a1,1,0,0,0-.19,1.15l.89,1.78-1.89.63A1,1,0,0,0,2,10.5v3a1,1,0,0,0,.68.95l1.89.63-.89,1.78A1,1,0,0,0,3.87,18L6,20.13a1,1,0,0,0,1.15.19l1.78-.89.63,1.89a1,1,0,0,0,.95.68h3a1,1,0,0,0,.95-.68l.63-1.89,1.78.89A1,1,0,0,0,18,20.13L20.13,18a1,1,0,0,0,.19-1.15l-.89-1.78,1.89-.63A1,1,0,0,0,22,13.5v-3A1,1,0,0,0,21.32,9.55ZM20,12.78l-1.2.4A2,2,0,0,0,17.64,16l.57,1.14-1.1,1.1L16,17.64a2,2,0,0,0-2.79,1.16l-.4,1.2H11.22l-.4-1.2A2,2,0,0,0,8,17.64l-1.14.57-1.1-1.1L6.36,16A2,2,0,0,0,5.2,13.18L4,12.78V11.22l1.2-.4A2,2,0,0,0,6.36,8L5.79,6.89l1.1-1.1L8,6.36A2,2,0,0,0,10.82,5.2l.4-1.2h1.56l.4,1.2A2,2,0,0,0,16,6.36l1.14-.57,1.1,1.1L17.64,8a2,2,0,0,0,1.16,2.79l1.2.4ZM12,8a4,4,0,1,0,4,4A4,4,0,0,0,12,8Zm0,6a2,2,0,1,1,2-2A2,2,0,0,1,12,14Z"></path>
								</svg>
							</div>
						</a>
						<a class="pointer">
							<div class="css-1vzus6i-Icon">
								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" class="css-sr6nr">
									<path d="M10,18a1,1,0,0,0,1-1V11a1,1,0,0,0-2,0v6A1,1,0,0,0,10,18ZM20,6H16V5a3,3,0,0,0-3-3H11A3,3,0,0,0,8,5V6H4A1,1,0,0,0,4,8H5V19a3,3,0,0,0,3,3h8a3,3,0,0,0,3-3V8h1a1,1,0,0,0,0-2ZM10,5a1,1,0,0,1,1-1h2a1,1,0,0,1,1,1V6H10Zm7,14a1,1,0,0,1-1,1H8a1,1,0,0,1-1-1V8H17Zm-3-1a1,1,0,0,0,1-1V11a1,1,0,0,0-2,0v6A1,1,0,0,0,14,18Z"></path>
								</svg>
							</div>
						</a>
					</div>
					<div class="dashboard-row__drag grid-drag-handle"></div>
				</div>
				<span class="react-resizable-handle react-resizable-handle-se"></span>
			</div>
		);
	}
});
